<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角边框</title>
        <style type="text/css">
            .test {
                width: 600px ; /* 设置元素宽度 */
                height: 400px ; /* 设置元素高度 */
                margin: 50px auto ; /* 设置元素外边距 ( 先上下 后左右 )*/
                border-top: 10px solid #0000FF ; /* 顶部边框 */
                border-bottom: 10px solid #1A7D00; /* 底部边框 */
                border-left: 10px solid #FF6347 ; /* 左侧边框 */
                border-right: 10px solid #9932CC; /* 右侧边框 */
                border-top-left-radius: 100px 150px ; /* 设置圆角边框 */
                border-top-right-radius: 50px 100px ; /* 设置圆角边框 */
                border-bottom-left-radius: 25px 50px ; /* 设置圆角边框 */
                border-bottom-right-radius: 25px 25px ; /* 设置圆角边框 */
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>